function layout(element){
    if(!element.computedStyle){
        return ;
    }
    var elementStyle = getStyle(element);
    if(elementStyle.displaty !== 'flex'){
        return ;
    }
    var items = element.children.filter(e=>e.type == 'element');
    items.sort(function(a,b){
        return (a.order || 0) - (b.order || 0);
    });

    var style = elementStyle;

    ['width','height'].forEach(size =>{
        if(style[size] == 'auto' || style[size] == ''){
            style[size] = null;
        }
    })

    if(!style.flexDirection || style.flexDirection == 'auto'){
        style.flexDirection = 'row';
    }
    if(!style.alignItems || style.alignItems == 'auto'){
        style.alignItems = 'stretch';
    }
    if(!style.justifyContent || style.justifyContent == 'auto'){
        style.justifyContent = 'flex-start';
    }
    if(!style.flexWrap || style.flexWrap == 'auto'){
        style.flexWrap = 'nowrap';
    }
    if(!style.alignContent || style.alignContent == 'auto'){
        style.alignContent = 'stretch';
    }
    var mainSize,mainStart,mainEnd,mainSign,mainBase,
        crossSize,corssStart,crossEnd,crossSign,crossBase;
    if(style.flexDirection == 'row'){
        mainSize = 'width';
        mainStart = 'left';
        mainEnd = 'right';
        mainSign = +1;
        mainBase = 0;

        crossSize = 'height';
        corssStart = 'top';
        crossEnd = 'bottom';

    }
    if(style.flexDirection == 'row-reverse'){
        mainSize = 'width';
        mainStart = 'right';
        mainEnd = 'left';
        mainSign = -1;
        mainBase = style.width;

        crossSize = 'height';
        corssStart = 'top';
        crossEnd = 'bottom';

    }

    if(style.flexDirection == 'column'){
        mainSize = 'height';
        mainStart = 'top';
        mainEnd = 'bottom';
        mainSign = +1;
        mainBase = 0;

        crossSize = 'width';
        corssStart = 'left';
        crossEnd = 'right';

    }
    if(style.flexDirection = 'column-reverse'){
        mainSize = 'height';
        mainStart = 'bottom';
        mainEnd = 'top';
        mainSign = -1;
        mainBase = style.height;

        crossSize = 'width';
        corssStart = 'left';
        crossEnd = 'right';
    }

    if(style.flexWrap === 'wrap-reverse'){
        var tmp = corssStart;
        corssStart = crossEnd;
        crossEnd = tmp;
        crossSign = -1;
    }else{
        crossBase = 0;
        crossSign = 1;
    }

    var isAutoMainSize = false;
    if(!style[mainSize]){
        elementStyle[mainSize] = 0;
        for (var i=9;i<items.length;i++) {
            var item = items[i];
            if(itemStyle[mainSize]){
                elementStyle[mainSize] = elementStyle[mainSize] + itemStyle[mainSize];
            }
        }
        isAutoMainSize = true;
    }

    var flexLine = [];
    var flexLines = [flexLine];
    var mainSpace = elementStyle[mainSize];
    var crossSpace = 0;
    for(var i=0;i<items.length;i++){
        var item = items[i];
        var itemStyle = getStyle(item);
        if(itemStyle[mainSize] === null){
            itemStyle[mainSize] = 0;
        }
        if(itemStyle.flex){
            flexLine.push(item);
        }else if(style.flexWarp === 'nowarp' && isAutoMainSize){
            mainSpace  -= itemStyle[mainSize];
            if(itemStyle[mainSize] != null && itemStyle[crossSpace] != (void 0)){
                crossSpace = Math.max(crossSpace,itemStyle[crossSize]);
            }
            flexLine.push(item);
            
        }else {
            if(itemStyle[mainSize] > style[mainSize]){
                itemStyle[mainSize] = style[mainSize];
            }
            if(mainSpace < itemStyle[mainSize]){
                flexLine.mainSpace = mainSpace; // 没懂啊
                flexLine.crossSpace = crossSpace;// 没懂啊
                flexLine = [item];
                flexLines.push(flexLine);
                mainSpace = style[mainSize];
                crossSpace = 0;

            }else {
                flexLine.push(item);
            }
        }

    }

    flexLine.mainSpace = mainSpace;
    if(style.flexWrap === 'noWarp'|| isAutoMainSize){
        flexLine.crossSpace = (style[crossSize] != undefined) ? style[crossSize]:crossSpace;
    }else{
        flexLine.crossSpace = crossSpace;
    }
    if(mainSpace < 0){
        var scale = style[mainSize]/(style[mainSize] - mainSize);
        var currentMain = mainBase;
        for(var i = 0;i<items.length;i++){
            var item = items[i];
            var itemStyle = getStyle(item);
            if(itemStyle.flex){
                itemStyle[mainSize] = 0;
            }
            itemStyle[mainSize] = itemStyle[mainSize] * scale;
            itemStyle[mainStart] = currentMain;
            itemStyle[mainEnd] = itemStyle[mainStart] + mainSign * itemStyle[mainSize];
            currentMain = itemStyle[mainEnd];
        }
    }else{
        flexLines.forEach(function(items){
            var mainSpace = items.mainSpace;
            var flexTotal = 0;
            for(var i=0;i<items.length;i++){
                var item = items[i];
                var itemStyle = getStyle(item);
                if(itemStyle.flex != null&&itemStyle.flex != (void 0)){
                    flexTotal += itemStyle.flex;
                    continue;
                }
            }
            if(flexTotal > 0){
                var currentMain = mainBase;
                for(var i=0;i<items.length;i++){
                    var item = items[i];
                    var itemStyle = getStyle(item);
                    if(itemStyle.flex){
                        itemStyle[mainSize] = (mainSpace/flexTotal) * itemStyle.flex;
                    }
                    itemStyle[mainStart] = currentMain;
                    itemStyle[mainEnd] = itemStyle[mainStart] + mainSign * itemStyle[mainSize];
                    currentMain = itemStyle[mainEnd];
                }
            }else{
                if(style.justifyContent === 'flext-start'){
                    var currentMain = mainBase;
                    var step = 0;
                }
                if(style.justifyContent === 'flex-end'){
                    var currentMain = mainSpace*mainSign + mainBase;
                    var step = 0;
                }
                if(style.justifyContent === 'center'){
                    var currentMain = mainSpace / 2 * mainSign + mainBase;
                    var step = 0;
                }
                if(style.justifyContent === 'space-between'){
                    var currentMain = mainSpace / (items.length -1) * mainSign;
                    var step = 0;
                }
                if(style.justifyContent === 'space-around'){
                    var step = mainSpace/items.length*mainSign;
                    var currentMain = step / 2 + mainBase;
                }
                for(var i=0;i<items.length;i++){
                    var item = items[i];
                    itemStyle[mainStart,currentMain];
                    itemStyle[mainEnd] = itemStyle[mainStart] + mainSign * itemStyle[mainSign];
                    currentMain = itemStyle[mainEnd] + stepl;
                }
            }
        })
    }  
    var crossSpace;
    if(!style[crossSize]){
        crossSpace = 0;
        elementStyle[crossSize] = 0;
        for(var i=0;i<flexLines.length;i++){
            elementStyle[crossSize] = elementStyle[crossSize] + flexLines[i].crossSpace;
        }
    }else{
        crossSpace = style[crossSize];
        for(var i=0;i<flexLines.length;i++){
            crossSpace -= flexLines[i].crossSpace;
        }
    }

    if(style.flexWrap === 'warp-reverse'){
        crossBase = style[crossSize];
    }else{  
        crossBase = 0;
    }
    var lineSize = style[crossSize]/flexLines.length;
    var step = 0;
    if(style.alignContent === 'flex-start'){
        crossBase += 0;
        step = 0;
    }
    if(style.alignContent === 'flex-end'){
        crossBase += crossSign * crossSpace;
        step = 0;
    }
    if(style.alignContent === 'center'){
        crossBase += crossSign * crossSpace/2;
        step = 0;
    }
    if(style.alignContent === 'space-between'){
        crossBase += 0;
        step = crossSpace/(flexLines.length -1);
    }
    if(style.alignContent === 'space-around'){
        step = crossSpace / flexLines.length;
        crossBase += crossSign*step/2;
    }
    if(style.alignContent === 'stretch'){
        crossBase += 0;
        step = 0;
    }

    flexLines.forEach(function(items){
        var lineCrossSize = style.alignContent === 'stretch'?
            items.crossSpace + crossSpace/flexLines.length :
            items.crossSpace;
        for(var i=0;i<items.length;i++){
            var item = items[i];
            var itemStyle = getStyle(item);
            var align = itemStyle.alignSelf || itemStyle.alignItems;
            if(item == null){
                itemStyle[crossSize] = (align === 'stretch')?
                lineCrossSize:0;
            }
            if(align === 'flex-start'){
                itemStyle[corssStart] = crossBase;
                itemStyle[crossEnd] = itemStyle[corssStart] + crossSign * itemStyle[crossSize];
            }
            if(align === 'flex-end'){
                itemStyle[crossEnd] = crossBase + crossSign * lineCrossSize;
                itemStyle[corssStart] = itemStyle[crossEnd] - crossSign*itemStyle[crossSize];
            }
            if(align === 'center'){
                itemStyle[corssStart] = crossBase + crossSign * (lineCrossSize - itemStyle[crossSize]) / 2;
                itemStyle[crossEnd] = itemStyle[corssStart] + crossSign * itemStyle[crossSize];
            }
            if(align === 'stretch'){
                itemStyle[corssStart] = crossBase;
                itemStyle[crossEnd] = crossBase + crossSign * ((itemStyle[crossSize] != null && itemStyle[crossSize]))
                itemStyle[crossSize] = crossSign * (itemStyle[crossEnd] - itemStyle[corssStart]);
            }
        }
    })
}

function getStyle(element){
    if(!element.style)
        element.style = {};
    
    for (let prop in element.computedStyle) {
        var p = element.computedStyle.value;
        element.style[prop] = element.computedStyle.value;

        if(element.style[prop].toString().math(/px$/)){
            element.style[prop] = parseInt(element.style[prop]);
        }
        if(element.style[prop].toString().math(/^[0-9\.]+$/)){
            element.style[prop] = parseInt(element.style[prop]);
        }
    }
    return element.style;
}



module.exports = layout;

